body{
    height: 2500px;
}
.box{
    width: 150px;
    height: 150px;
    border: 1px solid red;
}

.b1{
    
    background-color: rgb(86, 204, 71);
}
.b1:hover{
    transform: translate(50px,100px);
}
.b2{
    position: absolute;
    top:0px;
    right: 0px;
    transform: translate(50px,50px);
   
}
.big{
    width: 400px;
    height: 400px;
    background-color: rgb(87, 180, 157);
    /* padding: 20px; */
    position: relative;
}
.b3{
background-color: rgb(54, 167, 50);
transition: all 0.5s;
}
.b3:hover{
    /* transform: rotate(720deg); */
    transform: rotate(50deg);
}
.b4{
    
    background-color: rgb(25, 104, 77);
    transition: all 1s;
    margin: 0 auto;
}
.b4:hover{
    transform: scale(1.5,2);
}
.img-box{
    width: 408px;
    height: 528px;
    margin:0 auto;
    overflow: hidden;

}
.img-box img{
    transition: all 0.3s;
}
.img-box img:hover{
    transform: scale(1.3) rotate(30deg);
}
.b5{
    margin:0 auto;
    transition: all 1s;
    transform-origin:10% 50% ;
}
.b5:hover{
    transform: rotate(180deg);
    
}